<template>
  <vue-content>
    <div class="accountFrom">
      <el-form :model="formData" label-width="120px" ref="ruleForm" :rules="rules">
      <el-form-item label="企业名称" prop="companyName">
        <el-input v-model.trim="formData.companyName" :disabled="true" auto-complete="off"></el-input>
      </el-form-item>
			<el-form-item label="企业规模" prop="companyScale">
				<el-select v-model="formData.companyScale">
					<el-option 
						v-for="item in compList"
						:key="item.sortNumber"
						:label="item.companyScaleName"
						:value="item.companyScaleNo"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="企业类型" prop="companyType" required>
        <el-input v-model.trim="formData.companyType" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="企业简介" prop="companyDesc">
        <el-input
          v-model.trim="formData.companyDesc"
          type="textarea"
          class="textarea"
         auto-complete="off"></el-input>
      </el-form-item>
			<el-form-item label="企业联系人" prop="contractPerson">
        <el-input v-model.trim="formData.contractPerson" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="企业联系电话" prop="contractPhone">
        <el-input v-model.trim="formData.contractPhone" auto-complete="off"></el-input>
      </el-form-item>
			<el-form-item label="企业联系邮箱" prop="email">
        <el-input v-model.trim="formData.email" :disabled="true" auto-complete="off"></el-input>
      </el-form-item>
			<el-form-item label="企业地址" prop="companyAddress">
        <el-input v-model.trim="formData.companyAddress" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="企业logo" prop="companyLogoUrl">
      	<div class="editImg" v-if="imgShow === 'edit' && formData.companyLogoUrl != ''">
      		<img :src="imgSrc(formData.companyLogoUrl)" />
      	</div>
        <el-upload
				  :action="baseUrl()"
				  list-type="picture-card"
				  :on-remove="handleRemove"
				  accept="image/jpeg,image/gif,image/png,image/bmp"
				  :auto-upload = "false"
				  :on-change="handleChangeImg"
				  :drag="false"
				  >
				  <i class="el-icon-plus"></i>
				  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible" size="tiny">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="info" @click="edit" :disabled="Subabled">编 辑</el-button> -->
      <el-button type="info" @click="submit('ruleForm')" :disabled="Subabled">审 核</el-button>
    </div>
  </div>
  </vue-content>
</template>
<script>
import { queryCompanyList,queryCompanyDetail } from "@/services/companyRegist";
import { oneImgFromData} from "@/services/getFromData";
import {RequestError} from '@/services/errors'
import {deepClone} from '@/utilities/object'
var vailMobile = (rule, value, callback) => {
	var MobileRegex = /^1[34578]\d{9}$/;
	if (!MobileRegex.test(value)) {
	    callback(new Error('企业联系人电话格式不正确！(仅支持手机号)'))
	    } else {
	        callback();
	    }
};
var vailNumber = (rule, value, callback) => {
	var NumberyRegex = /^[0-9]*$/;
	if (!NumberyRegex.test(value)) {
	    callback(new Error('格式不正确,只能输入数字'))
	    } else {
	        callback();
	    }
};
var vailEmail = (rule, value, callback) => {
	var emailRegex = /^[0-9A-Za-z][\.-_0-9A-Za-z]*@[0-9A-Za-z]+(\.[0-9A-Za-z]+)+$/;
	if (!emailRegex.test(value)) {
	    callback(new Error('企业联系人邮箱格式不正确！'))
	    } else {
	        callback();
	    }
};
  export default {
    name: 'account-manager',
    components: {},
    data: () => ({
      file:{},
      imgShow:"edit",
			compList:[],
      formData: {
				companyNo:"",
        companyName: "",
        companyAddress: "",
        email: "",
        contractPerson: "",
        contractPhone: "",
				status: "",
				companyDesc:"",
				companyScale:"",
				companyType:""
			},
      Subabled:false,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible: false,
      menuInfo: [],
      rules: {
        companyName: [{ required: true, message: "请输入企业名称", trigger: "blur" },
        { min: 1, max: 50, message: '长度在 50个字符以内', trigger: 'blur' }],
        companyDesc: [{ required: true, message: "请输入企业描述", trigger: "blur" },
        { min: 1, max: 200, message: '长度在 200个字符以内', trigger: 'blur' }],
        contractPerson: [{ required: true, message: "请输入企业联系人姓名", trigger: "blur" },
				{ min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }],
				companyAddress: [{ required: true, message: "请输入企业地址", trigger: "blur" },
				{ min: 1, max: 100, message: '长度在 100个字符以内', trigger: 'blur' }],
				companyType: [{ required: true, message: "请输入企业类型", trigger: "blur" },
				{ min: 1, max: 10, message: '长度在 10个字符以内', trigger: 'blur' }],
        contractPhone: [
    			{ required: true, message: '请输入企业联系电话', trigger: 'blur' },
   			  { validator: vailMobile, trigger: 'blur'}
   			],
				email: [
    			{ required: true, message: '请输入邮箱', trigger: 'blur' },
   			  { validator: vailEmail, trigger: 'blur'}
        ], 
      }
    }),
    created () {
      this.loadCompList();
      this.loadData();
    },
    methods: {
      async loadCompList () {
        try {
          let data = await queryCompanyList();
          // console.log(data)
          this.compList = data.data;
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      async loadData () {
        this.loading = true
        try {
          let data = await queryCompanyDetail()
          // debugger
          this.formData = data.data
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      imgSrc(data){
      	return this.$store.state.imgUrl + data;
      },
      styleStr(data){
      	return "width: 20px;height: 20px;border: 1px solid #aaa;margin-left:10px; border-radius: 5px;background: #"+data+";"
      },
      baseUrl(){
        return "";
      },
      handleRemove(file, fileList) {
        this.file = ""
      },
      handleChangeImg(file, fileList){
          this.file = file.raw;
          this.imgShow = ""
          if(fileList.length > 1){
            this.$message.warning('当前限制选择 1个文件,多张图片覆盖第一张');
            var thisNode = document.getElementsByClassName("el-upload-list__item")[0];
            thisNode.parentNode.removeChild(thisNode);
          }
          var isJPG = ""
          if(file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'){
            isJPG = true
          }else{
            isJPG = false
          }
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传图片只能是 JPG/png 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
      },
      editFinish (needRefresh) {
        this.view = ''
        if(needRefresh){
          this.$nextTick(() => {
            // dom元素更新后执行， 因此此处能正确打印出更改之后的值；
            this.loadData()
          })
        }
      },
      edit(){
        
      },
      submit(formName,status) {
        this.Subabled = true;
        this.butTimeOut();
        this.$refs[formName].validate(async valid => {
          if (valid) {
            try {
                //把图片的信息和参数放进请求头里
                var sref = this;
                //把图片的信息和参数放进请求头里
                let code = await oneImgFromData({
                  companyNo: this.formData.companyNo,
                  companyName: this.formData.companyName,
                  companyAddress: this.formData.companyAddress,
                  email: this.formData.email,
                  contractPerson: this.formData.contractPerson,
                  contractPhone: this.formData.contractPhone,
                  status: status,
                  companyDesc:this.formData.companyDesc,
                  companyScale:this.formData.companyScale,
                  companyType:this.formData.companyType,
                },"/ecshop/company/updateCompanyInfo.do","companyLogo",sref.file).then(
                  function(data){
                    sref.$message({
                      showClose: true,
                      message: data,
                      type: "success"
                    });
                    sref.$router.push({
                      path: '/'
                    })
                  }, 
                  function(reason, data){
                    sref.$message({
                      showClose: true,
                      message: reason,
                      type: "error"
                    });
                  });
            } catch (e) {
              if (e instanceof RequestError) {
                this.$alert(e.message, "提示", {
                  type: "error",
                  confirmButtonText: "确定"
                });
              } else {
                throw e;
              }
            }
          } else {
            return;
          }
        });
      },
      butTimeOut(){
        var serf = this;
        setTimeout(function(){
          serf.Subabled = false;
        },1200)
      }
    },
    watch: {
    },
    filters: {
    },
  }
</script>

<style>
.el-select {
  width: 100%;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
.editImg{
	  overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
    float: left;
}
.editImg img{
	width: 100%;
	height: 100%;
}
.accountFrom{
  width: 80%;
  padding-left: 15%;
  padding-top: 40px;
}
.accountItem{
   margin-bottom: 22px;
}
.accountlable{
  width: 100px;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.accountCon{
  line-height: 40px;
  position: relative;
  font-size: 14px;
  display: inline-block;
}
</style>
